<template>
  <h2>剑库</h2>
  <div class="menu-container">
    <v-card class="sword-menu">
      <v-tabs
        :show-arrows="false"
        :hide-slider="true"
        v-model="tab"
        bg-color="#fff"
        color="#70A480"
        :grow="true"
        selected-class="tab-active"
      >
        <v-tab size="large" variant="flat" value="sets">剑</v-tab>
        <v-tab size="large" variant="flat" value="blade">剑刃</v-tab>
        <v-tab size="large" variant="flat" value="guard">剑格</v-tab>
        <v-tab size="large" variant="flat" value="hilt">剑把</v-tab>
      </v-tabs>
      <v-card-text>
        <v-window v-model="tab">
          <small class="disabled-text" v-if="paused"
            >Disabled while in-game</small
          >
          <v-window-item value="sets">
            <v-item-group
              :disabled="paused"
              @update:model-value="updateSet"
              v-model="swordSet"
              class="items-list"
              :class="{ disabled: paused }"
              selected-class="item-selected"
            >
              <v-item
                :value="set.name"
                v-for="set in SWORD_PRESETS"
                v-slot="{ selectedClass, toggle }"
                selected-class="item-selected"
              >
                <v-hover v-slot="{ isHovering, props }">
                  <div v-bind:="props">
                    <v-card
                      class="sword-item"
                      :class="{ selectedClass }"
                      :disabled="!globalStore.owned.includes(set.name)"
                      @click="toggle"
                    >
                      <span class="title">{{ set.name }}</span>
                      <img
                        v-if="!globalStore.owned.includes(set.name)"
                        src="/lock.svg"
                        style="width: 25px; position: absolute; z-index: 99"
                      />
                      <img
                        :src="`/swords/set_${set.name.toLowerCase()}.png`"
                        :alt="set.name"
                      />
                      <v-expand-transition>
                        <div
                          v-if="
                            isHovering && !globalStore.owned.includes(set.name)
                          "
                          class="d-flex transition-fast-in-fast-out bg-green-darken-2 v-card--reveal"
                          style="
                            height: 100%;
                            z-index: 999;
                            pointer-events: auto;
                          "
                          @click="buySet(set.name)"
                        >
                          <span>
                            Costs
                            <img
                              src="/gold.svg"
                              style="
                                height: 17px;
                                width: 17px;
                                vertical-align: middle;
                              "
                            />
                            {{ swordSetCosts }}
                          </span>
                        </div>
                      </v-expand-transition>
                    </v-card>
                  </div>
                </v-hover>
              </v-item>
            </v-item-group>
          </v-window-item>
          <v-window-item value="blade">
            <v-item-group
              :disabled="paused"
              v-model="settings.bladeModel"
              mandatory="force"
              class="items-list"
              :class="{ disabled: paused }"
              selected-class="item-selected"
            >
              <v-item
                :value="set.name"
                v-for="set in SWORD_PRESETS"
                v-slot="{ selectedClass, toggle }"
                selected-class="item-selected"
              >
                <v-card
                  class="sword-item"
                  :class="selectedClass"
                  :disabled="!globalStore.owned.includes(set.name)"
                  @click="toggle"
                >
                  <span class="title">{{ set.name }}</span>
                  <img
                    v-if="!globalStore.owned.includes(set.name)"
                    src="/lock.svg"
                    style="width: 25px; position: absolute; z-index: 99"
                  />
                  <img
                    :src="`/swords/blade_${set.name.toLowerCase()}.png`"
                    :alt="set.name"
                  />
                </v-card>
              </v-item>
            </v-item-group>
          </v-window-item>
          <v-window-item value="guard">
            <v-item-group
              :disabled="paused"
              v-model="settings.guardModel"
              mandatory="force"
              class="items-list"
              :class="{ disabled: paused }"
              selected-class="item-selected"
            >
              <v-item
                :value="set.name"
                v-for="set in SWORD_PRESETS"
                v-slot="{ selectedClass, toggle }"
                selected-class="item-selected"
              >
                <v-card
                  class="sword-item"
                  :class="{
                    selectedClass,
                    disabled: !globalStore.owned.includes(set.name),
                  }"
                  :disabled="!globalStore.owned.includes(set.name)"
                  @click="toggle"
                >
                  <span class="title">{{ set.name }}</span>
                  <img
                    v-if="!globalStore.owned.includes(set.name)"
                    src="/lock.svg"
                    style="width: 25px; position: absolute; z-index: 99"
                  />
                  <img
                    :src="`/swords/guard_${set.name.toLowerCase()}.png`"
                    :alt="set.name"
                  />
                </v-card>
              </v-item>
            </v-item-group>
          </v-window-item>
          <v-window-item value="hilt">
            <v-item-group
              :disabled="paused"
              v-model="settings.hiltModel"
              mandatory="force"
              class="items-list"
              :class="{ disabled: paused }"
              selected-class="item-selected"
            >
              <v-item
                :value="set.name"
                v-for="set in SWORD_PRESETS"
                v-slot="{ selectedClass, toggle }"
                selected-class="item-selected"
              >
                <v-card
                  class="sword-item"
                  :class="{
                    selectedClass,
                    disabled: !globalStore.owned.includes(set.name),
                  }"
                  :disabled="!globalStore.owned.includes(set.name)"
                  @click="toggle"
                >
                  <span class="title">{{ set.name }}</span>
                  <img
                    v-if="!globalStore.owned.includes(set.name)"
                    src="/lock.svg"
                    style="width: 25px; position: absolute; z-index: 99"
                  />
                  <img
                    :src="`/swords/hilt_${set.name.toLowerCase()}.png`"
                    :alt="set.name"
                  />
                </v-card>
              </v-item>
            </v-item-group>
          </v-window-item>
        </v-window>
      </v-card-text>
    </v-card>
    <div class="selected-items">
      <div class="item">
        <img
          :src="`/swords/blade_${settings.bladeModel.toLowerCase()}.png`"
          alt="Blade"
        />
      </div>
      <div class="item">
        <img
          :src="`/swords/guard_${settings.guardModel.toLowerCase()}.png`"
          alt="Guard"
        />
      </div>
      <div class="item">
        <img
          :src="`/swords/hilt_${settings.hiltModel.toLowerCase()}.png`"
          alt="Hilt"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Settings } from '../game/models/Settings';
import { ref } from 'vue';
import { watch } from 'vue';
import { reactive } from 'vue';
import { computed } from 'vue';
import { VHover } from 'vuetify/components';
import { SWORD_PRESETS } from '~/libs/consts/game';
import { useGlobalStore } from '~/libs/stores/global';

const globalStore = useGlobalStore();

const swordSetCosts = 10000;

const isFullSet = computed(() => {
  return (
    props.settings.bladeModel === props.settings.guardModel &&
    props.settings.bladeModel === props.settings.hiltModel
  );
});

const props = defineProps<{ settings: Settings; paused: boolean }>();

const tab = ref('sets');
const swordSet = ref(isFullSet.value ? props.settings.bladeModel : null);

const settings = reactive(props.settings);

function buySet(setName: string) {
  const nowMoney = globalStore.money;
  if (nowMoney < swordSetCosts) {
    alert('Not enough!');
    return;
  } else {
    const moneyLeft = nowMoney - swordSetCosts;
    globalStore.buy(setName, moneyLeft);
  }
}

watch(
  () => props.settings,
  () => {
    settings.replace(props.settings);
  },
);

watch(settings, () => {
  swordSet.value = isFullSet.value ? props.settings.bladeModel : null;
});

const updateSet = (e: string) => {
  if (!globalStore.owned.includes(e)) return;
  settings.bladeModel = e;
  settings.guardModel = e;
  settings.hiltModel = e;
};
</script>

<style scoped lang="scss">
.disabled-text {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(#000, 0.6);
}

h2 {
  margin-bottom: 6px;
  font-weight: 400;
  font-size: 30px;
  font-family: 'Bree serif';
  letter-spacing: 3px;

  @media (max-width: 1000px) {
    padding: 10px;
    font-size: 20px;
  }
}

.menu-container {
  position: relative;
}

.sword-menu {
  position: relative;
  width: 30vw;
  max-width: 460px;

  @media (max-width: 768px) {
    width: 75vw;
  }

  .v-tabs {
    position: relative;

    &::before {
      display: block;
      position: absolute;
      right: 10px;
      bottom: 0;
      left: 10px;
      background-color: var(--primary);
      height: 2px;
      content: '';
    }
  }

  .tab-active {
    color: #fff;
  }

  .v-tab.v-tab {
    transition: color 150ms ease;
    margin-left: -2px;
    background-color: transparent;

    &::before {
      display: block;
      position: absolute;
      top: 50%;
      left: -2px;
      transform: translateY(-50%);
      background-color: var(--primary);
      width: 2px;
      height: 60%;
      content: '';
    }

    &.tab-active {
      &::before {
        opacity: 0;
      }

      & + .v-tab::before {
        opacity: 0;
      }
    }
  }

  .items-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 15px 25px 30px;
    max-height: 400px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    .sword-item {
      display: flex;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 30%;
      justify-content: center;
      align-items: center;
      transition: background-color 300ms ease;
      cursor: pointer;
      box-shadow: none;
      border-bottom: 2px solid rgba(#000, 0.25);
      background-color: rgba(#000, 0.03);
      padding: 4px;
      max-width: 125px;
      height: 125px;
      overflow: hidden;

      img {
        transition: transform 300ms cubic-bezier(0.06, 0.52, 0.76, 1.23);
        width: 100%;
        height: 100%;
        object-fit: contain;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      &:hover {
        img {
          transform: scale(1.35);
        }
      }

      &.item-selected {
        border-color: var(--primary);
        background-color: rgba(#70a480, 0.31);
      }
    }

    &.disabled {
      opacity: 0.8;
      filter: saturate(0.5);
      pointer-events: none;
    }

    &::-webkit-scrollbar {
      width: 0;
    }
  }

  &::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: linear-gradient(transparent 85%, #fff 97%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: '';
  }
}

@media (max-width: 1500px) {
  .sword-menu {
    .items-list {
      gap: 10px;
      padding-right: 0;
      padding-left: 0;
      max-height: 40vh;
    }
  }
}

@media (max-width: 1200px) {
  .sword-menu {
    .items-list {
      .sword-item {
        flex-basis: 40%;
      }
    }
  }
}

@media (max-width: 1000px) {
  .sword-menu {
    .items-list {
      max-height: 70vh;
    }
  }
}

.selected-items {
  display: flex;
  position: absolute;
  top: 48px;
  right: 0;
  flex-direction: column;
  gap: 1.1vw;
  transform: translateX(100%);
  padding-left: 16px;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    border: 3px solid var(--primary);
    background-color: rgb(255 255 255 / 43%);
    padding: 3px;
    width: 70px;
    height: 70px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
    }
  }

  @media (max-width: 1500px) {
    .item {
      width: 50px;
      height: 50px;
    }
  }

  @media (max-width: 1200px) {
    display: none;
  }
}

.title {
  position: absolute;
  top: 0;
  z-index: 2;
  color: #000;
  font-weight: 400;
  text-shadow: 0px 0px 2px #fff;
}

.v-card--reveal {
  position: absolute;
  bottom: 0;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  width: 100%;
}
</style>
